<template>
  <div class="updateImg">
    <el-upload
      class="avatar-uploader"
      :action="url"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :on-progress="progress"
      name="imgFile"
      :with-credentials="true"
      :file-list="fileList"
    >
      <img v-if="info.coverImgUrl" :src="imgUrl" class="avatar" />
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "updateImg",
  props: {
    info: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      url: "",
      headers: {
        // "Content-Type": "multipart/form-data",
      },
      fileList: [],
      imgUrl: "",
    };
  },
  created() {
    this.imgUrl = this.info.coverImgUrl;
    this.url = `http://localhost:3000/playlist/cover/update?id=${this.info.id}`;
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.imgUrl = response.data.url_pre;
        this.$message({
          type: "success",
          message: "更新歌单图片成功",
        });

        // 通知父组件， 重新获取 用户歌单 信息
        this.$emit("updateUserAlbum");
      }
    },
    progress(e, file, fileList) {
      console.log(fileList);
      this.fileList.push(file);
    },
  },
};
</script>

<style lang="less" scoped>
.updateImg {
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed @globalColor;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/ .el-icon-plus {
    position: absolute;
    top: 0;
    left: 0;
    color: #ffffff;
  }
}
</style>
